<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/material/easyui.css">
    <script type="text/javascript" src="../public/jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../public/jeasyui/jquery.easyui.min.js"></script>
    <script src="../public/js/jquery.serializejson.min.js"></script>
</head>
<body>
    <table id="dg">

    </table>

    <div id="tb" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加用户</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="cut()">删除选中</a>
        <input class="easyui-searchbox" style="width:150px" id="search">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reload()" style="width:80px">刷新</a>
    </div>

    <div id="dlg" class="easyui-dialog" title="详细信息" data-options="closed:true,iconCls:'icon-save'" style="width:400px;height:500px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input name="_id" style="display:none">


            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'姓名:',required:true">
            </div>


            <div style="margin-bottom:20px">
                <input class = "easyui-textbox easyui-passwordbox" prompt = "Password" iconWidth = "28" name="password" style="width:100%" data-options="label:'密码:',required:true">
            </div>



            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="dd" type="text"
                name="birth" style="width:100%" data-options="label:'生日:',required:true">
            </div>


            <div style="margin-bottom:20px">
                <p>性别:</p>
                <input class="easyui-radiobutton" name="gender" value="男" label="男">
                <input class="easyui-radiobutton" name="gender" value="女" label="女">
            </div>


            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" id="age" style="width:100%" data-options="label:'年龄:',required:true,editable:true">
            </div>

            <div class="easyui-panel" style="width:100%;max-width:400px;border:0">
                <div style="margin-bottom:20px">
                    <input id="cc" style="width:100%;" name="marital">
                </div>
            </div>
            <div id="sp">
                <div style="padding:10px">
                    <input type="radio" name="lang" value="01"><span>未婚</span><br/>
                    <input type="radio" name="lang" value="02"><span>已婚</span><br/>
                    <input type="radio" name="lang" value="03"><span>丧偶</span><br/>
                </div>
            </div>

            <div style="margin-bottom:20px">
                <input class="easyui-numberbox" type='text  ' name="salary" data-options="label:'月收入',labelPosition:'top',precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'￥',width:'100%'">
            </div>


            <div style="margin-bottom:20px" id="hobby">
                <p>兴趣爱好:</p>
                <input class="easyui-checkbox" name="hobby[]" value="下棋" label="下棋">
                <input class="easyui-checkbox" name="hobby[]" value="体育" label="体育">
                <input class="easyui-checkbox" name="hobby[]" value="看书" label="看书">
                <input class="easyui-checkbox" name="hobby[]" value="旅游" label="旅游">
                <input class="easyui-checkbox" name="hobby[]" value="植物" label="植物">
                <input class="easyui-checkbox" name="hobby[]" value="历史" label="历史">
                <input class="easyui-checkbox" name="hobby[]" value="军事" label="军事">
                <p></p>
                <input class="easyui-textbox hobby" style="width:100%" label='其他:'>
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
        </div>
    </div>
</body>
</html>

<script>




    $(function(){
        $('#cc').combo({
            required:true,
            editable:false,
            label:'婚姻状况:',
            labelPosition:'top'
        });
        $('#sp').appendTo($('#cc').combo('panel').panel({
            openAnimation:'slide',
            closeAnimation:'slide',
        }));
        $('#sp input').click(function(){
            var s = $(this).next('span').text();
            $('#cc').combo('setValue', s).combo('setText', s).combo('hidePanel');

        });

    });



    function reload(){
        $('#dg').datagrid({
            url:'http://localhost:3000/users/list',
            fit:true,
            border:false,
            pagination:true,
            toolbar:$('#tb'),
            columns:[[
                {field:'ck',checkbox:true},
                {field:'name',title:'用户名',width:100},
                {field:'password',title:'密码',width:100,align:'left'},
                {field:'hobby',title:'爱好',width:100,align:'left'},
                {field:'marital',title:'婚姻状况',width:100,align:'center'},
                {field:'birth',title:'生日',width:100,align:'center'},
                {field:'gender',title:'性别',width:100,align:'center'},
                {field:'age',title:'年龄',width:100,align:'center'},
                {field:'salary',title:'月收入',width:100,align:'right'},
                {field:'_id',title:'操作', width:80,align:'center',
                    formatter: function(value,row,index){
                        return `<a href='javascript:void(0)' onclick="editData('${value}')">修改</a>  <a href='javascript:void(0)' onclick="deleteData('${value}')">删除</a>`
                    }
                }
            ]]
        });
    }



    $('#search').searchbox({
        searcher:function(name){
            if(!$('#search').val()==''){
                $('#dg').datagrid({
                    url:`http://localhost:3000/users/search/${name}`,
                    fit:true,
                    border:false,
                    pagination:true,
                    toolbar:$('#tb'),
                    columns:[[
                        {field:'ck',checkbox:true},
                        {field:'name',title:'用户名',width:100},
                        {field:'password',title:'密码',width:100,align:'left'},
                        {field:'hobby',title:'爱好',width:100,align:'left'},
                        {field:'marital',title:'婚姻状况',width:100,align:'center'},
                        {field:'birth',title:'生日',width:100,align:'center'},
                        {field:'gender',title:'性别',width:100,align:'center'},
                        {field:'age',title:'年龄',width:100,align:'center'},
                        {field:'salary',title:'月收入',width:100,align:'right'},
                        {field:'_id',title:'操作', width:80,align:'center',
                        formatter: function(value,row,index){
                        return `<a href='javascript:void(0)' onclick="editData('${value}')">修改</a>  <a href='javascript:void(0)' onclick="deleteData('${value}')">删除</a>`
                            }
                        }
                    ]]
                });
            }else{
                reload()
            }
        },
    });



   $('.easyui-radiobutton').radiobutton({
        labelWidth:80,
        width:18,
        height:18,
        labelPosition:'after'
    })



    $('.easyui-checkbox').checkbox({
        labelWidth:150,
        width:18,
        height:18,
        labelPosition:'after'
    })


    function deleteData(id){
        $.messager.confirm('确认', '确认删除该条数据?', function(r){
            if (r){
                $.ajax({
                    url:`http://localhost:3000/users/${id}`,
                    type:"delete"
                }).done(res=>{
                    $('#dg').datagrid('reload');
                })
            }
        });
    }


    function editData(id){
        $.ajax({
            url:`http://localhost:3000/users/${id}`,
            type:"get"
        }).done(res=>{
            $('#dlg').dialog('open');
            empty();
            $('#sp input').removeAttr("checked")
            $('#ff').form('load',res);
        })
    }


    function removes(){
        $.messager.confirm('确认', '确认删除选中数据?', function(r){
            if (r){
                var dgSelections=$('#dg').datagrid('getSelections');
                var ids=[];
                for(var i=0;i<dgSelections.length;i++){
                    ids.push(dgSelections[i]._id);
                    $.ajax({
                        url:'http://localhost:3000/users/removes',
                        type:'post',
                        data:{
                            ids:ids.toString()
                        }
                    }).done(res=>{
                        $('#dg').datagrid('reload');
                    })
                }
            }
        });
    }


    function add(){
        $('#dlg').dialog('open');
        empty();
        $('#sp input').removeAttr("checked");
        clearForm();
    }

    function cut(){
        removes();
    }


    $('#dg').datagrid({
        url:'http://localhost:3000/users/list',
        fit:true,
        border:false,
        pagination:true,
        toolbar:$('#tb'),
        columns:[[
            {field:'ck',checkbox:true},
            {field:'name',title:'用户名',width:100},
            {field:'password',title:'密码',width:100,align:'left'},
            {field:'hobby',title:'爱好',width:100,align:'left'},
            {field:'marital',title:'婚姻状况',width:100,align:'center'},
            {field:'birth',title:'生日',width:100,align:'center'},
            {field:'gender',title:'性别',width:100,align:'center'},
            {field:'age',title:'年龄',width:100,align:'center'},
            {field:'salary',title:'月收入',width:100,align:'right'},
            {field:'_id',title:'操作', width:80,align:'center',
                formatter: function(value,row,index){
                    return `<a href='javascript:void(0)' onclick="editData('${value}')">修改</a>  <a href='javascript:void(0)' onclick="deleteData('${value}')">删除</a>`
                }
            }
        ]]
    });


    function empty(){
        $('.hobby').textbox({
            onChange:function(){
                if($('.hobby').val()!==''){
                    $('.hobby').attr({name:'hobby[]'});
                }
            }
        })

        if($('.hobby').val()==''){
            $('.hobby').attr({name:''})
        }
    }




    function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                    var formdata=$('#ff').serializeJSON();


                   console.log(formdata);
                   if(formdata._id){

                        $.ajax({
                            url:`http://localhost:3000/users/${formdata._id}`,
                            type:"put",
                            data:formdata
                        }).done(formdata=>{
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm();
                        });
                   }else{
                        delete formdata._id;
                        $.ajax({
                        url:"http://localhost:3000/users",
                        type:"post",
                        data:formdata
                        }).done(formdata=>{
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm();
                        })
                    }
                };
            }
        });
    }


    function clearForm(){
        $('#ff').form('clear');
    }


    $('#dd').datebox({
        required:true,
        onSelect:function(date){
            // alert(date)
        }
    });


</script>